<!-- START action buttons-->
<div class="clearfix mb">
   <div class="btn-group pull-left">
      <button type="button" class="btn btn-default btn-sm">
         <em class="fa fa-mail-reply text-gray-dark"></em>
      </button>
      <button type="button" class="btn btn-default btn-sm">
         <em class="fa fa-mail-reply-all text-gray-dark"></em>
      </button>
      <button type="button" class="btn btn-default btn-sm">
         <em class="fa fa-mail-forward text-gray-dark"></em>
      </button>
   </div>
   <div class="btn-group pull-right">
      <button type="button" class="btn btn-default btn-sm">
         <em class="fa fa-exclamation text-gray-dark"></em>
      </button>
      <button type="button" class="btn btn-default btn-sm">
         <em class="fa fa-times text-gray-dark"></em>
      </button>
   </div>
</div>
<!-- END action buttons-->
<div ng-controller="MailFolderController as mailfolder" class="panel panel-default">
   <div class="panel-body">
      <p ng-if="!(mailfolder.mails | filter:mailfolder.folder).length" class="lead text-center">No mails here</p>
      <table ng-if="(mailfolder.mails | filter:mailfolder.folder).length" class="table table-hover mb-mails">
         <tbody>
            <tr ng-repeat="mail in mailfolder.mails | filter:mailfolder.folder" ng-class="{'mb-mail-active': mail.unread}">
               <td>
                  <div class="checkbox c-checkbox">
                     <label>
                        <input type="checkbox" />
                        <span class="fa fa-check"></span>
                     </label>
                  </div>
               </td>
               <td class="text-center">
                  <em ng-class="mail.folder=='starred'?'fa-star text-warning':'fa-star-o text-muted'" class="fa fa-lg"></em>
               </td>
               <td ui-sref="app.mailbox.view({mid: mail.id})">
                  <img ng-src="{{mail.from.avatar}}" alt="Mail Avatar" class="mb-mail-avatar pull-left" />
                  <div class="mb-mail-date pull-right">{{mail.date}}</div>
                  <div class="mb-mail-meta">
                     <div class="pull-left">
                        <div class="mb-mail-subject">{{mail.subject}}</div>
                        <div class="mb-mail-from">{{mail.from.name}}</div>
                     </div>
                     <div ng-bind-html="mail.content | limitTo:100" class="mb-mail-preview"></div>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>